<template>

  <div class="activemodify">
<!--    活动名称，活动开始时间，报名截至时间，活动详情，文件-->
    <el-form ref="form" :model="form" label-width="90px" size="80px">
      <el-form-item label="活动名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="开始时间" style="font-size: larger">
        <el-col :span="15">
          <el-date-picker
            v-model="form.createDate"
            type="datetime"
            style="width: 100%; padding-left: 40px; font-size: 18px"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="截至时间">
        <el-col :span="15">
          <el-date-picker
            v-model="form.deadline"
            type="datetime"
            style="width: 100%; padding-left: 40px; font-size: 18px"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item label="活动详情">
        <el-input type="textarea" autosize v-model="form.detail"></el-input>
      </el-form-item>

        <el-form-item label="文件列表">
          <div v-for="(item,index) in this.form.fileList" >
            {{item.fileName}}
            <span class="rt">
            <el-button type="danger" @click="Listfile(item.id,item.filePath)" plain >删除</el-button>
          </span>

            <br><br>
          </div>
        </el-form-item>
      <div align="right">
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存修改</el-button>
          <el-button @click="back">重置</el-button>
        </el-form-item>
      </div>
      <el-card>
        <el-form-item label="增加文件" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            action="none"
            :auto-upload="false"
            multiple
            :limit="3"
            :on-change="uploadFile"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              文件大小不超过2MB
            </div>
          </el-upload>
        </el-form-item>
      </el-card>
    </el-form>
    <div  style="margin-left: 330px">
      <el-button type="primary" @click="addAct">上传文件</el-button>
    </div>
  </div>
</template>

<script>
import activeApi from "../../../api/HotEvent";
import {mapMutations} from "vuex";
var formData = new window.FormData()
export default {
name: "index",
  data() {
    return {
      formLabelWidth: "120px",
      backform: {},
      form: {},
      fileList: []
    }
  },
  methods: {
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    //上传文件
    uploadFile(file, fileList) {
      // let files = [];
      // // this.form.files = fileList;
      // // console.log("fileList", fileList);

      // fileList.map(item => {
      //   files.push(item.raw);
      // });
      console.log(fileList);
      let arr = [];
      fileList.map(item => {
        arr.push(item.raw);
      });
      console.log(arr);
      this.fileList = arr;
      // let formData = new FormData();
      // formData.append("file", [files.raw]);
      // // actApi.uploadIcon(formData);
      // console.log(files, fileList);
    },
    async addAct () {
      for (let i = 0; i < this.fileList.length; i++) {
        formData.append("files", this.fileList[i]);
      }
      formData.append("aid",this.form.id)
      console.log(formData);
      const data = await activeApi.updateActiveFile(formData)
      if (data.code===0) {
        this.$message({
          type: "success",
          message: data.msg
        });
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }
      if (data.code===0){
        const info = await activeApi.activeDetail(this.id);
        info.createDate = this.timeChange(info.createDate);
        info.deadline = this.timeChange(info.deadline);
        this.form = info.data
      }
    },
  // 下载文件按钮
    async Listfile (id,filePath) {
      const data = await activeApi.deletefilePath({
        id: id,
        filePath: filePath
      })
      console.log("删除成功的数据：")
      console.log(data);
      if (data.code===0) {
        console.log(data.msg)
        this.$message({
          type: "success",
          message: data.msg
        });
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }

      if (data.code===0){
        const info = await activeApi.activeDetail(this.id);
        info.createDate = this.timeChange(info.createDate);
        info.deadline = this.timeChange(info.deadline);
        this.form = info.data
      }
    },
  // 重置按钮
    async back () {
      const { code, data } = await activeApi.activeDetail(this.id);
      data.createDate = this.timeChange(data.createDate);
      data.deadline = this.timeChange(data.deadline);
      this.form = data
    },
    timeChange(time) {
      var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m =
        date.getMinutes() < 10
          ? "0" + date.getMinutes() + ":"
          : date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    ...mapMutations(["activeIndexUpdate"]),
    async onSubmit() {
      const newform = {
        name: this.form.name,
        aid: this.form.id,
        createDate: this.form.createDate,
        deadline: this.form.deadline,
        detail: this.form.detail
      }
      const data = await activeApi.updateActiveInfo({
        form: newform
      });
      if (data.code===0){
        this.$message({
          message: data.msg,
          type: 'success'
        })
      }else {
        this.$message({
          message: data.msg,
          type: 'error'
        })
      }
    }
  },
  async mounted() {
    this.id = this.$route.query.id;
    const { code, data } = await activeApi.activeDetail(this.id);
    console.log("修改页面的数据是： ")
    console.log(data);
    data.createDate = this.timeChange(data.createDate);
    data.deadline = this.timeChange(data.deadline);
    this.form = data
    this.backform = data
  }
}
</script>

<style scoped>
.activemodify{
  width: 70%;
}
el-form-item__label{
  color: wheat;
  font-size: x-large;

}
.rt{float:right; width:100px;}
</style>
